<script setup lang="js">

import {ref,onMounted} from "vue";
import { useRoute } from "vue-router";
import {fetchListAllCate} from "@/api/resourceCategory.js";
import {fetchAllResourceList} from "@/api/resource.js";
import {allocRoleResource, listResourceByRole} from "@/api/roleList.js";


const route = useRoute();
const roleId = ref('');
const allResource = ref([]);
const allResourceCate = ref([]);

onMounted(() => {
  roleId.value = route.query.roleId;
  getAllResourceCateList();
})

// TODO: 获取所有资源分类列表
const getAllResourceCateList = () => {
  fetchListAllCate().then(res=>{
    allResourceCate.value = res.data.data;
    for (let i = 0; i < allResourceCate.value.length; i++) {
      allResourceCate.value[i].checked = false;
    }
    getAllResourceList();
  })
}

// TODO: 获取所有资源列表
const getAllResourceList = () => {
  fetchAllResourceList().then(res=>{
    allResource.value = res.data.data;
    for (let i = 0; i < allResource.value.length; i++) {
      allResource.value[i].checked = false;
    }
    getResourceByRole(roleId.value)
  })
}

// TODO: 保存角色资源
const getResourceByRole = (roleId) => {
  listResourceByRole(roleId).then(res=>{
    let allocResource = res.data.data;
    allResource.value.forEach(item => {
      item.checked = getResourceChecked(item.id,allocResource);
    })
    allResourceCate.value.forEach(item => {
      item.checked = isAllChecked(item.id);
    })
  })
}

// TODO: 保存角色资源分类
const getResourceByCate = (categoryId) => {
  let cateResource = [];
  if (allResource.value == null) return null;
  for (let i = 0; i < allResource.value.length; i++) {
    let resource = allResource.value[i];
    if (resource.categoryId === categoryId) {
      cateResource.push(resource);
    }
  }
  return cateResource;
}

// TODO: 资源分类全选
const getResourceChecked = (resourceId,allocResource) => {
  if(allocResource==null||allocResource.length===0) return false;
  for(let i=0;i<allocResource.length;i++){
    if(allocResource[i].id===resourceId){
      return true;
    }
  }
  return false;
}

// TODO: 是否全选
const isAllChecked = (categoryId) => {
  let cateResources = getResourceByCate(categoryId);
  if (cateResources == null) return false;
  let checkedCount = 0;
  for (let i = 0; i < cateResources.length; i++) {
    if (cateResources[i].checked === true) {
      checkedCount++;
    }
  }
  if(checkedCount===0){
    return false;
  }
  return checkedCount === cateResources.length;
}

// TODO: indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果
const isIndeterminate = (categoryId) => {
  let cateResources = getResourceByCate(categoryId);
  if (cateResources == null) return false;
  let checkedCount = 0;
  let uncheckedCount = 0;
  for (let i = 0; i < cateResources.length; i++) {
    if (cateResources[i].checked === true) {
      checkedCount++;
    } else {
      uncheckedCount++;
    }
  }
  return checkedCount > 0 && uncheckedCount > 0;
}

</script>

<template>
    <div class="alloc-resource">
        <el-card class="form-container" shadow="never" width="100%">
          <div v-for="(cate,index) in allResourceCate" :class="index===0?'top-line':null" :key="'cate'+cate.id">
            <el-row class="table-layout" style="background: #F2F6FC;">
              <el-checkbox v-model="cate.checked"
                           :indeterminate="isIndeterminate(cate.id)"
                           @change="handleCheckAllChange(cate)">
                {{cate.name}}
              </el-checkbox>
            </el-row>
            <el-row class="table-layout">
              <el-col :span="8" v-for="resource in getResourceByCate(cate.id)" :key="resource.id" style="padding: 4px 0">
                <el-checkbox v-model="resource.checked" @change="handleCheckChange(resource)">
                  {{resource.name}}
                </el-checkbox>
              </el-col>
            </el-row>
          </div>
          <div style="margin-top: 20px" align="center">
            <el-button type="primary" @click="handleSave()">保存</el-button>
            <el-button @click="handleClear()">清空</el-button>
          </div>
        </el-card>
    </div>
</template>

<style scoped lang="scss">
.alloc-resource {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 20px;

  .table-layout {
    padding: 10px 20px;
    border-left: 1px solid #DCDFE6;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
  }

  .top-line {
    border-top: 1px solid #DCDFE6;
  }
}
</style>